﻿<phone:PhoneApplicationPage x:Class="Tombstoner.View.LongListSelector"
                            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                            xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
                            xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
                            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                            xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
                            xmlns:Converters="clr-namespace:Tombstoner.View.Converters"
                            FontFamily="{StaticResource PhoneFontFamilyNormal}"
                            FontSize="{StaticResource PhoneFontSizeNormal}"
                            Foreground="{StaticResource PhoneForegroundBrush}"
                            SupportedOrientations="Portrait"
                            Orientation="Portrait"
                            mc:Ignorable="d"
                            d:DesignHeight="768"
                            d:DesignWidth="480"
                            shell:SystemTray.IsVisible="True"
                            DataContext="{Binding MainViewModel, Source={StaticResource Locator}}">
    <phone:PhoneApplicationPage.Resources>
        <Converters:GroupToBackgroundBrushValueConverter x:Key="GroupBackground" />
        <Converters:GroupToForegroundBrushValueConverter x:Key="GroupForeground" />
    </phone:PhoneApplicationPage.Resources>
        <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot"
          Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel"
                    Grid.Row="0"
                    Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle"
                       Text="TOMBSTONER DEMO"
                       Style="{StaticResource PhoneTextNormalStyle}" />
            <TextBlock x:Name="PageTitle"
                       Text="long list selector"
                       Margin="9,-7,0,0"
                       Style="{StaticResource PhoneTextTitle1Style}" />
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel"
              Grid.Row="1"
              Margin="12,0,12,0">
            <toolkit:LongListSelector x:Name="buddies"
                                      Background="Transparent"
                                      Margin="0,-8,0,0"
                                      ItemsSource="{Binding Buddies}">
                <toolkit:LongListSelector.GroupItemsPanel>
                    <ItemsPanelTemplate>
                        <toolkit:WrapPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </toolkit:LongListSelector.GroupItemsPanel>
                <toolkit:LongListSelector.GroupItemTemplate>
                    <DataTemplate>
                        <Border Background="{Binding Converter={StaticResource GroupBackground}}"
                                Width="99"
                                Height="99"
                                Margin="6"
                                IsHitTestVisible="{Binding HasItems}">
                            <TextBlock Text="{Binding Key}"
                                       FontFamily="{StaticResource PhoneFontFamilySemiBold}"
                                       FontSize="48"
                                       Margin="8,0,0,0"
                                       Foreground="{Binding Converter={StaticResource GroupForeground}}"
                                       VerticalAlignment="Bottom" />
                            <Border.Projection>
                                <PlaneProjection RotationX="-60" />
                            </Border.Projection>
                        </Border>
                    </DataTemplate>
                </toolkit:LongListSelector.GroupItemTemplate>
                <toolkit:LongListSelector.GroupHeaderTemplate>
                    <DataTemplate>
                        <Border Background="Transparent"
                                Margin="12,8,0,8">
                            <Border Background="{StaticResource PhoneAccentBrush}"
                                    Padding="8,0,0,0"
                                    Width="62"
                                    Height="62"
                                    HorizontalAlignment="Left">
                                <TextBlock Text="{Binding Key}"
                                           Foreground="#FFFFFF"
                                           FontSize="48"
                                           FontFamily="{StaticResource PhoneFontFamilySemiLight}"
                                           HorizontalAlignment="Left"
                                           VerticalAlignment="Bottom" />
                            </Border>
                        </Border>
                    </DataTemplate>
                </toolkit:LongListSelector.GroupHeaderTemplate>
                <toolkit:LongListSelector.ItemTemplate>
                    <DataTemplate>
                        <Grid Margin="12,8,0,8">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Image Width="110"
                                   Height="150"
                                   Source="{Binding ImageUrl}"
                                   VerticalAlignment="Top" />
                            <StackPanel Grid.Column="1"
                                        VerticalAlignment="Top">
                                <TextBlock Text="{Binding FullName}"
                                           Style="{StaticResource PhoneTextLargeStyle}"
                                           FontFamily="{StaticResource PhoneFontFamilySemiBold}"
                                           Margin="12,-12,12,6" />
                                <TextBlock Text="{Binding Email}"
                                           Style="{StaticResource PhoneTextNormalStyle}"
                                           TextWrapping="Wrap"
                                           FontFamily="{StaticResource PhoneFontFamilySemiBold}" />
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="Mobile:"
                                               Style="{StaticResource PhoneTextSmallStyle}" />
                                    <TextBlock Text="{Binding Mobile}"
                                               Style="{StaticResource PhoneTextSmallStyle}"
                                               FontFamily="{StaticResource PhoneFontFamilySemiBold}" />
                                </StackPanel>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="Home:"
                                               Style="{StaticResource PhoneTextSmallStyle}" />
                                    <TextBlock Text="{Binding Home}"
                                               Style="{StaticResource PhoneTextSmallStyle}"
                                               FontFamily="{StaticResource PhoneFontFamilySemiBold}" />
                                </StackPanel>
                            </StackPanel>
                        </Grid>
                    </DataTemplate>
                </toolkit:LongListSelector.ItemTemplate>
            </toolkit:LongListSelector>

        </Grid>
    </Grid>
</phone:PhoneApplicationPage>
